<template>
    <div v-if="isshowMask">
        <div class="bigbox"></div>
        <!-- 点击删除 -->
        <div class="content-box" v-if="isshowType == 'del'">
            <img src="../../assets/img/framebox/delete.png" alt="" class="deletelogo">
            <img src="../../assets/img/framebox/close.png" alt="" class="closeimg" @click="closeMaskFn">
            <p>您确定将已选文件删除吗？</p>
            <span>删除后将无法恢复</span>
            <div class="button flex flex-pack-justify">
                <div class="surebtn" @click="sureFn">确定</div>
                <div class="surebtn cancelbtn" @click="cancelFn">取消</div>
            </div>
        </div>
        <!-- 查看属性 -->
        <div class="attribute-box" v-if="isshowType == 'attribute'">
            <div class="toptitle">
                属性
                <img src="../../assets/img/framebox/close.png" alt="" class="closeimg" @click="closeMaskFn">
            </div>
            <div class="listcontent">
                <p>名称：{{this.$store.state.listData.name}}</p>
                <p>创建者：{{this.$store.state.listData.memberName}}</p>
                <p>创建时间：{{this.$store.state.listData.date}}</p>
                <p>大小：{{this.$store.state.listData.size}}</p>
                <p>包含：{{this.$store.state.listData.name}}</p>
            </div>
            <div class="surebtn" @click="surenoFn">确定</div>
        </div>
        <!-- 修改密码 -->
        <div class="attribute-box changePwd" v-if="isshowType == 'showPass'">
            <div class="toptitle">修改密码</div>
            <div class="listcontent">
                <p>
                    <span>*</span>原密码
                    <input type="password" v-model='pwd' placeholder="请输入旧密码">
                </p>
                <p>
                    <span>*</span>新密码
                    <input type="password" v-model="newsPwd" placeholder="6-32个字符，至少两种字符组合">
                </p>
                <p>
                    <span>*</span>确认密码
                    <input type="password" v-model="qrPwd" placeholder="请确认新密码" class="surepwd">
                </p>
                <p class="tips">如果忘记密码请联系管理员</p>
            </div>
            <div class="button flex">
                <div class="surebtn" @click="surePwdFn">确定</div>
                <div class="surebtn cancelbtn" @click="cancelFn">取消</div>
            </div>
        </div>
        <!-- 客服热线 -->
        <div class="content-box" v-if="isshowType == 'showServer'">
            <img src="../../assets/img/framebox/kefu.png" alt="" class="deletelogo">
            <img src="../../assets/img/framebox/close.png" alt="" class="closeimg" @click="closeMaskFn">
            <p>客服热线：13526352456</p>
            <div class="button" style="width:90px">
                <div class="surebtn cancelbtn" @click="cancelFn">关闭</div>
            </div>
        </div>
        <!-- 密码失效，重新登录 -->
        <div class="content-box" v-if="isshowLogin">
            <img src="../../assets/img/framebox/pass.png" alt="" class="deletelogo">
            <img src="../../assets/img/framebox/close.png" alt="" class="closeimg" @click="closeMaskFn">
            <p>您的密码已失效，请重新登录</p>
            <div class="button" style="width:90px">
                <div class="surebtn" @click="sureloginFn">确定</div>
            </div>
        </div> 
         <!-- 文件还原 -->
         <div class="content-box" v-if="isshowType == 'reduction' ">
            <img src="../../assets/img/framebox/huanyuan.png" alt="" class="deletelogo">
            <img src="../../assets/img/framebox/close.png" alt="" class="closeimg" @click="closeMaskFn">
            <p>你确定要将已选文件还原吗？</p>
            <span v-if="this.$store.state.selectData.length <= 1">还原到：{{this.$store.state.selectData[0].route}}</span>
            <div class="button flex flex-pack-justify">
                <div class="surebtn" @click="sureHuanFn">确定</div>
                <div class="surebtn cancelbtn" @click="cancelFn">取消</div>
            </div>
        </div> 
    </div>
</template>

<script>
export default {
  data() {
    return {
      isshowMask: false, // 显示遮罩层
      isshowType: "",
      isshowDel: false, // 显示删除弹框
      isshowAttribute: false, // 显示属性弹框
      isshowPass: false, //显示修改密码弹框
      isshowServer: false, //显示客服热线弹框
      isshowLogin: false, //显示密码失效，重新登录弹框
      isshowFile: false, //还原文件弹框
      OnelistData: {}, //显示属性单条数据
      pwd:'', //原密码
      newsPwd:'', //新密码
      qrPwd:'', //确认新密码
    };
  },
  watch: {
    showMaskType() {
      this.isshowType = this.$store.state.showMaskType;
    },
    showMask() {
      this.isshowMask = this.showMask;
    }
  },
  computed: {
    showMaskType() {
      return this.$store.state.showMaskType;
    },
    showMask() {
      return this.$store.state.showMask;
    }
  },
  mounted() {},
  methods: {
    // 点击确定删除
    sureFn() {
      this.$store.commit("getSure", "suredel");
      this.$store.commit("isshowMask", false);
    },
    // 无操作确定
    surenoFn() {
      this.OnelistData.status = 0;
      this.$store.commit("isshowMask", false);
    },
    // 点击确定修改密码
    async  surePwdFn() {
        if(this.pwd && this.qrPwd && this.newsPwd){
            var _self = this;
            if(this.qrPwd == this.newsPwd){
                var params = {
                    origin:this.pwd,
                    new:this.newsPwd
                }
                var data = await this.$https.post('member/ChangePwd',params)
                this.$toast({
                    message: data.error
                });
                window.setTimeout(function(){
                    _self.$router.push('/');
                    location.reload();
                },3000)
            }else{
                this.$toast({
                    message: '确认密码与新密码不一致'
                });
            }
        }
    },
    // 点击确定还原文件
    sureHuanFn() {
        this.$store.commit("getSure", "surehuan");
        this.$store.commit("isshowMask", false);
    },
    // 确定重新登录
    sureloginFn() {},
    // 点击取消
    cancelFn() {
      this.$store.commit("isshowMask", false);
    },
    // 关闭弹窗
    closeMaskFn() {
      this.$store.commit("isshowMask", false);
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/common/framebox.less);
</style>
